<template>
	<m-layout title="会员购买" barBg="unset" gap="24 0">
		<m-block spa="200 0 0" gap="30" radius="60">
			<view class="flex">
				<m-image src="http://117.24.6.18:5003/static/tzimg/vipMenu.png" wh="42" spa="0 10 0 0"></m-image>
				<m-text block bold ftsize="30">加入同在优选VIP</m-text>
			</view>

			<view class="flex" style="margin: 20rpx 0;">
				<m-image :src="userinfo.headPicUrl == '00'?'http://117.24.6.18:5003/static/tzimg/logo.png':userinfo.headPicUrl"
					wh="78" spa="0 25 0 0" />
				<view class="flex-1">
					<m-text block bold ftsize="24">{{userinfo.nicKname || userinfo.userName}}</m-text>
					<m-text block ftsize="24" spa="15 0 0"  v-if="userinfo.vip">您已是会员</m-text>
					<m-text block ftsize="24" spa="15 0 0" v-else>您还不是会员，开通会员，即刻解锁全部奖励</m-text>
				</view>
			</view>

			<m-image radius="0" src="http://117.24.6.18:5003/static/tzimg/vipMenu1.png" wh="296 48"></m-image>
			<m-block gap="11" spa="0 0 20 0" bgColor="linear-gradient(90deg, #99D1FC 0%, #97D2FF 100%)"
				radius="0 20 20 20 ">
				<m-block className="flex" bgColor="#E9F4FF" gap="40 55">
					<template v-if="userinfo.vip">
						<view class="flex-1 flex-between">
							<m-text>到期时间：{{userinfo.vipExpireTime | mkfsTime}}</m-text>
							
							<m-button gap="8 35 " spa="0 0 0 30" @click="buyVip" radius="10">续订</m-button>
						</view>
					</template>
					<template v-else>
						<view class="flex-column flex-center">
							<view class="flex">
								<m-text color="var(--theme)" ftsize="40">￥</m-text>
								<m-text color="var(--theme)" ftsize="76">30</m-text>
							</view>
							<m-tag spa="10 0 0" bgColor="#CCE4FD" color="var(--theme)">优惠价</m-tag>
						</view>
						<view class="flex-column flex-start" style="padding:10rpx  40rpx 0;">
							<m-text bold ftsize="30" spa="0 0 10 0 ">月度会员</m-text>
							<m-text color="#999999" ftsize="24">到期后以￥{{vipConfig['price']}}/月自动续费</m-text>
							<m-text color="#999999" ftsize="24">可随时取消</m-text>
						</view>
					</template>
					
				</m-block>
			</m-block>
			<view class="flex">
				<m-image src="http://117.24.6.18:5003/static/tzimg/vipMenu2.png" wh="42" spa="0 10 0 0"></m-image>
				<m-text block bold ftsize="30">开通会员福利</m-text>
			</view>
			<m-block border="2px solid #97D2FF" bgColor="#E9F4FF" spa="20 0">
				<view class="flex" style="padding: 24rpx 16rpx;">
					<m-tag gap="8 12" ftsize="28" spa="0 20 0 0" style="font-weight: bold;" radius="14"
						bgColor="linear-gradient(126deg, #55AEF3 0%, #97D2FF 100%)">送</m-tag>
					<m-text bold>推荐人获得积分</m-text>
					<m-text spa="0 10 0" color="var(--theme)">{{vipConfig['invJf']}}</m-text>
					<m-text bold>积分</m-text>
					<m-text spa="0 0 0 30" color="#999999" ftsize="24">多推多得</m-text>
				</view>
				<m-line spa="0" wh="4"></m-line>
				<view class="flex" style="padding: 24rpx 16rpx;">
					<m-tag gap="8 12" ftsize="28" spa="0 20 0 0" style="font-weight: bold;" radius="14"
						bgColor="linear-gradient(126deg, #FFCE35 0%, #FCE8BE 100%)">券</m-tag>
					<m-text bold>获得</m-text>
					<m-text spa="0 10 0" color="var(--theme)">{{vipConfig['couponCount']}}</m-text>
					<m-text bold>张</m-text>
					<m-text spa="0 10 0" color="var(--theme)">5元</m-text>
					<m-text bold>代金券</m-text>
					<m-text spa="0 0 0 30" color="#999999" ftsize="24">{{vipConfig['timeLimit']}}月后失效</m-text>
				</view>
			</m-block>


			<m-text color="#999" ftsize="22" spa="30 0 0">确认购买并支付后，将通过您的账号自动续订。</m-text>
			<m-text color="#999" ftsize="22" spa="15 0 0">会在到期前24小时内扣费，扣费成功后订阅周期顺延一个订阅周期。</m-text>
			<m-text color="#999" ftsize="22">如需取消续订，请在当前订阅周期到期前24小时以前。</m-text>

			<template v-if="userinfo.vip">
				<m-button disabled type='disabled' block spa="40 0 0">已开通VIP</m-button>
			</template>
			<m-button v-else block spa="40 0 0" @click="buyVip">立即开通</m-button>

		</m-block>
	</m-layout>
</template>

<script>
	import { UserInfo } from '@/api/Users';
	import { buyVip } from '@/api/Trade.js'
	import { GetConfigVIP } from '@/api/Ctrls.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				isLoading: false,
				vipConfig: {},
			};

		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo
			}),
		},
		onShow() {
			UserInfo()
			this.GetConfigVIP();
		},
		methods: {
			async GetConfigVIP() {
				const data = await GetConfigVIP()
				this.vipConfig = data[0]
			},
			async buyVip() {
				this.Jump({
					url: '/pages/surePay',
					params: {
						methods: 'buyVip',
						count: 1,
						vip: this.vipConfig['vip'],
						price: this.vipConfig['price']
					}
				})
			},
		},
		onPullDownRefresh() {
			this.init();
		},

	}
</script>

<style lang="scss">
	page {
		background: url('http://117.24.6.18:5003/static/tzimg/vipbanner.png') #fff no-repeat;
		background-size: 750rpx 492rpx;
		/* #ifndef MP-WEIXIN */
		background-position: left -40rpx;
		/* #endif */
	}
</style>